<template>


    <el-card class="box-card">
        <el-row :gutter="10">


            <el-col :span="6">
                <el-input v-model="name" placeholder="请输入关键词"></el-input>
            </el-col>
            <div class="btn">
                <el-button type="info" @click="clear">重置</el-button>
                <el-button type="primary" @click="select">查询</el-button>
                <el-button type="success" @click="add">新增</el-button>

            </div>
        </el-row>
    </el-card>



    <el-card class="box-card2">
        <el-table
                :data="hospitalList"
                style="width: 100%">
            <el-table-column
                    align="center"
                    prop="id"
                    label="序号"
                    width="100px"
            >
            </el-table-column>

            <el-table-column
                    align="center"
                    prop="name"
                    label="名称"
            >
            </el-table-column>


            <el-table-column label="操作" width="200" align="center">
                <template #default="{ row }">

                    <div class="mybtn">

                        <el-button plain type="warning" @click="update(row)" class="smallbtn">编辑
                        </el-button>

                        <el-button plain type="danger" @click="del(row)" class="smallbtn">删除
                        </el-button>

                    </div>
                </template>

            </el-table-column>


            <template #empty>
                <el-empty description="没有数据"/>
            </template>

        </el-table>


        <el-pagination class="fenye"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       v-model:current-page="pageNum"
                       v-model:page-size="pageSize"
                       :page-sizes="[2, 4, 6, 8]"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>

    </el-card>


    <el-dialog title="添加科室" v-model="dialogFormVisible" @close="clear()" width="1800px">

        <el-form :model="form" ref="formRef" :rules="rules" label-width="100px">
            <el-form-item label="科室名" prop="name">
                <el-input v-model="form.name" placeholder="请输入课程名"></el-input>
            </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click=clear>取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </div>
    </el-dialog>


    <el-dialog title="修改科室" v-model="dialogFormVisibleUpdate" @close="clear()" width="1800px">

        <el-form :model="form" ref="formRef" :rules="rules" label-width="100px">
            <el-form-item label="科室名" prop="name">
                <el-input v-model="form.name" placeholder="请输入课程名"></el-input>
            </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click=clear>取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </div>
    </el-dialog>

</template>

<script setup>
    import {ref, reactive, onMounted} from "vue"
    import axios from 'axios'

    const name = ref('')
    const pageNum = ref(1)
    const pageSize = ref(2)
    const total = ref('')
    const hospitalList = ref([])
    const form = ref({})
    const dialogFormVisible = ref(false)
    const dialogFormVisibleUpdate = ref(false)
    const formRef = ref()

    onMounted(() => {


        select()
    })


    const select = async () => {
        const res = await axios.get('/department/singleList?pageNum=' + pageNum.value + '&pageSize=' + pageSize.value + '&name=' + name.value)

        hospitalList.value = res.data.data.items
        total.value = res.data.data.total
    }


    const clear = () => {

        dialogFormVisible.value = false
        dialogFormVisibleUpdate.value = false
        name.value = ''
        select()
        formRef.value.resetFields();
        form.value ={}

    }


    const handleSizeChange = (ps) => {
        pageSize.value = ps
        select()
    }


    const handleCurrentChange = (num) => {
        pageNum.value = num
        select()

    }


    const add = () => {
        form.value = {}
        dialogFormVisible.value = true
    }


    const rules = ref({
        name: [
            {required: true, message: '请输入科室名', trigger: 'blur'},
            {
                pattern: /^\S{2,10}/,
                message: '科室名长度在2-10个非空字符',
                trigger: 'blur'
            }
        ],

    })


    const save = async () => {

        await formRef.value.validate()
        const res = await axios.post('/department/save', form.value)
        ElNotification({
            title: '科室管理',
            message: '保存成功',
            duration: 2000,
            type:'success'
        })
        clear()

    }


    const update = (item) => {
        form.value = item
        dialogFormVisibleUpdate.value = true
    }

    const del = async (item) => {
        const res = await axios.get('/department/del?id='+item.id)
        ElNotification({
            title: '医院管理',
            message: '删除成功',
            duration: 2000,
            type:'success'
        })

        clear()
    }

</script>

<style scoped lang="scss">

    .hd {
        height: 100px;
        background-color: #fff;
        margin-top: 15px;
        box-shadow: 0 -.05333333rem .42666667rem 0 rgba(14, 86, 127, .09);
    }


    .box-card {
        margin-top: 15px;
    }

    .btn {
        margin-left: 20px;
    }

    .box-card2 {
        margin-top: 15px;
        height: 700px;
    }

    .fenye {
        margin-top: 30px;
        margin-left: 33%;
    }

    .ccc {
        width: 400px;

        margin: 10px auto;
        /*background-color: skyblue;*/
    }

    .preview {
        width: 95%;

    }

    .fenye {
        margin-top: 30px;
        margin-left: 33%;
    }

    .dialog-footer {
        margin-left: 40%;
    }

</style>
